<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script src="../js/jquery-3.6.3.min.js"></script>
	</head>

	<body>
		<div class="bbs">
			<header><span id="fatie">我要发帖</span></header>
			<section>
				<ul id="postlist">
					
				</ul>
			</section>
			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）" id="title">
				所属版块：<select id="sec">
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content" id="content"></textarea>
				<input class="btn" value="发布">
			</div>
		</div>

		<script>
			$(function() {
				$("span#fatie").click(function() {
					$(".post").css("display", "block")
				})
				var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
				var iNum = Math.floor(Math.random() * 4)
				$("input.btn").click(function() {

					var li = $("<li></li>");
					li.append("<div><img /></div>");
					//console.log([div]);
					li.append("<h1></h1>")
					li.find("h1").append("<span></span><span>" + "发表时间：" + new Date().toLocaleString() + "</span>");
					
					li.find("img").prop("src", tou[iNum])
					li.find("h1 span:eq(0)").html("板块："+ $(".title").prop("value"))
					//li.find("h1 span:eq(1)").html(new Date().toLocaleDateString());
					$("#postlist").prepend(li)
					$(".post").css("display", "none");
				})

			})
		</script>

	</body>

</html>
